<template>
  <div class="librarySslt">
    <div class="tabs">
      <Tabs :value="$route.meta.tabActive" @on-click="tabClick">
        <TabPane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.value" />
      </Tabs>
    </div>

    <div class="wrapper">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.tabList = [
      { label: '水库', value: 'reservoir' },
      { label: '河道站', value: 'river' },
      { label: '内涝点', value: 'waterlogging' },
      { label: '雨量站', value: 'rain' },
    ] 
  },
  methods: {
    tabClick (val) {
      this.$router.push(`/home/librarySslt/${val}`)
    } 
  }
}
</script>

<style lang="scss" scoped>
.librarySslt {
  width: 100%;
  height: 100%;
  position: relative;
  > .tabs {
    width: 100%;
    padding: 0 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    height: 36px;
    overflow: hidden;
  }
  > .wrapper {
    width: 100%;
    height: calc(100% - 10px);
  }
}
</style>
